<template>
  <div style="display: flex;">
    <div>
      <el-table
          highlight-current-row
          :cell-style="{paddingTop: '4px', paddingBottom: '4px'}"
          strpe
          :height="height"
          :data="setupData"
          style="width: 98%;"
          @cell-mouse-enter="cellMouseEnter"
          @cell-mouse-leave="cellMouseLeave"
          @keyup="setupHooksDatas"
      >
        <el-table-column
            label="测试之前执行的方法"
            width="500">
          <template #default="scope">
            <el-input clearable
                      v-model="scope.row.setup"
                      placeholder="${ setup_hooks function($request, *args, **kwargs) }"
            >
            </el-input>
          </template>
        </el-table-column>

        <el-table-column width="150">
          <template #default="scope">
            <el-row>
              <el-button
                  size="mini"
                  type="info"
                  @click="setupHandleEdit(scope.$index, scope.row)">
                <i size="mini" class="iconfont icon-add"></i>
              </el-button>
              <el-button
                  size="mini"
                  type="danger"
                  v-show="setupLenData > 1"
                  @click="setupHandleDelete(scope.$index, scope.row)">
                <i size="mini" class="iconfont icon-delete"></i>
              </el-button>
            </el-row>

          </template>
        </el-table-column>

      </el-table>
    </div>
    <div>
      <el-table
          highlight-current-row
          :cell-style="{paddingTop: '4px', paddingBottom: '4px'}"
          strpe
          :height="height"
          :data="teardownData"
          style="width: 98%;"
          @cell-mouse-enter="cellMouseEnter"
          @cell-mouse-leave="cellMouseLeave"
          @keyup="teardownHooksDatas"
      >
        <el-table-column
            label="测试之后执行的方法"
            width="500">
          <template #default="scope">
            <el-input clearable
                      v-model="scope.row.teardown"
                      placeholder="${ teardown_hooks function(response, *args, **kwargs) }"
            >
            </el-input>
          </template>
        </el-table-column>


        <el-table-column width="150">
          <template #default="scope">
            <el-row>
              <el-button
                  size="mini"
                  type="info"
                  @click="teardownHandleEdit(scope.$index, scope.row)">
                <i size="mini" class="iconfont icon-add"></i>
              </el-button>
              <el-button
                  size="mini"
                  type="danger"
                  v-show="teardownLenData > 1"
                  @click="teardownHandleDelete(scope.$index, scope.row)">
                <i size="mini" class="iconfont icon-delete"></i>
              </el-button>
            </el-row>

          </template>
        </el-table-column>

      </el-table>
    </div>
  </div>
</template>

<script>
import {ref} from "vue";

export default {
  props: {
    save: Boolean,
    hooks: {
      require: false
    },
    heights: ref(),
    setupHooks: [],
    teardownHooks: [],
  },
  computed: {
    height() {
      return this.heights - 70
    }
  },
  created() {

    if (this.setupHooks&&this.setupHooks.length>1){
      let setups = []
      for (let content of this.setupHooks) {
        let setup = {setup: content}
        setups.push(setup)
      }
      this.setupData = setups
      this.setupHooksDatas()
    }

    if (this.teardownHooks&&this.teardownHooks.length>=1){
      let teardowns = []
      for (let content of this.teardownHooks) {
        let teardown = {teardown: content}
        teardowns.push(teardown)
      }
      this.teardownData = teardowns
      this.teardownHooksDatas()
    }


  },

  methods: {
    teardownHooksDatas() {
      this.teardownLenData = this.teardownData.length
      let teardownData = []
      this.teardownData.forEach((item, index, arr) => {
        teardownData.push(item.teardown)
      })
      this.$emit('teardownHooksData', teardownData)
    },
    setupHooksDatas() {
      let setupDatas = []
      this.setupLenData = this.setupData.length
      this.setupData.forEach((item, index, arr) => {
        setupDatas.push(item.setup)
      })
      this.$emit('setupHooksData', setupDatas)
    },
    cellMouseEnter(row) {
      this.currentRow = row;
    },

    cellMouseLeave(row) {
      this.currentRow = '';
    },


    teardownHandleEdit(index, row, flag) {
      this.teardownData.push({
        teardown: ''
      });
      this.teardownHooksDatas();
    },

    teardownHandleDelete(index, row) {
      this.teardownData.splice(index, 1);
      this.teardownHooksDatas();
    },


    setupHandleEdit(index, row, flag) {
      this.setupData.push({
        setup: ''
      });
      this.setupHooksDatas();
    },


    setupHandleDelete(index, row) {
      this.setupData.splice(index, 1);
      this.setupHooksDatas();
    },

    parse_hooks() {
      let hooks = {
        setup_hooks: [],
        teardown_hooks: []
      };
      for (let content of this.tableData) {
        if (content.setup !== '') {
          hooks.setup_hooks.push(content.setup);
        }
        if (content.teardown !== '') {
          hooks.teardown_hooks.push(content.teardown);
        }
      }
      return hooks;
    }
  },
  data() {
    return {
      lenData: 0,
      setupLenData: 0,
      teardownLenData: 0,
      currentRow: '',
      setupData:[{
        setup: ''
      }],
      teardownData:[{
        teardown: ''
      }]
    }
  },
  name: "Hooks",


}
</script>

<style scoped>
</style>
